Knowledge of the latest JavaScript syntax is essential to understand and master React.
It takes reading the manual much easier and writing React code much shorter and cleaner.
Once we master some new JavaScript syntax, writing React code would be a breeze.
In this article, we’ll look at the use of the spread and rest operators in React apps.
Spread Operator
The spread operator comes in handy when we need to pass in lots of props, but we don’t want to write them all out in the JSX code.
This operator can be used with arrays or objects. With objects, we can use it to make a copy of an object as follows:
const obj = {
a: 1
};
const copy = {
...obj
};
In the code above, we used the spread operator to make a shallow copy of the obj object by copying the keys and values into the copy object.
A shallow copy means that only the top-level is copied, the rest are still referencing the original object.
Therefore, obj and copy are different objects with the same keys and values.
We can also use it to merge multiple objects together. For instance, we can use it as follows to merge multiple objects into one:
const obj1 = {
a: 1
};
const obj2 = {
b: 2
};
const obj3 = {
a: 3,
c: 3,
};
const merged = {
...obj1,
...obj2,
...obj3
};
In the code above, we have 3 objects, obj1 , obj2 , and obj3 which are merged together with the spread operator into one object, which is the merged object.
If there’re 2 values with the same corresponding key, then the one that’s merged in later overwrites the one that’s added earlier.
Therefore, merged is {a: 3, b: 2, c: 3} .
To use the spread operator with arrays, we can use it as follows:
const arr = [1, 2, 3];
const copy = [...arr];
In the code above, we have the copy array, which we copied from the arr array by using the spread operator.
It also makes a shallow copy, so nested objects and arrays are still referencing the items in the original array.
We can also merge in arrays with the spread operator. For instance, we can write:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const merged = [...arr1, ...arr2];
Then we get the that the merged array is:
[1, 2, 3, 4, 5, 6]
The values are just appended in the order they’re spread.
For instance, a frequently used example of this is the following:
import React from "react";
const props = {
greeting: "hi",
firstName: "jane",
lastName: "doe"
};
const Greeting = ({ greeting, firstName, lastName }) => (
<p>
{greeting}, {firstName} {lastName}
</p>
);
const App = () => {
return <Greeting {...props} />;
};
export default App;
In the code above, we have the Greeting component, which takes the greeting , firstName , and lastName props.
Then we have the App component, which uses the spread operator by writing:
<Greeting {...props} />
The expressions {...props} is for spreading the properties of props into props that are passed into the Greeting component.
Therefore, we’ll see that the props will be rendered with their values.
Rest Operator
The rest operator is used to keep parameters that haven’t been added as named parameters in an array if we’re using the rest parameter on parameters or an object if we’re using the rest operators on an object.
For instance, if we have some props that we don’t always want to reference. We can use the rest operator on it as follows:
import React from "react";
const props = {
firstName: "jane",
lastName: "doe",
age: 20,
gender: "female",
job: "waitress"
};
const Person = ({ firstName, lastName, ...restProps }) => (
<p>
{firstName} {lastName}, {restProps.age}, {restProps.gender}, {restProps.job}
</p>
);
const App = () => {
return <Person {...props} />;
};
export default App;
In the code above, we used the rest operator to put the props that we didn’t destructure into one big object.
The props object we have above had the age , gender , and job properties were spread with the spread operator inside the App component, so they’re all passed in as props.
However, in the Person component, we have the restProps variable with the rest operator before it, which converts it to an object with the age , gender , and job properties inside it.
Therefore, we can reference those properties in the restProps variable like we did inside the Greeting component.
Conclusion
The spread and rest operators are very useful for React and general JavaScript code. The spread operator lets us make shallow copies of objects and arrays and also merge them together.
Also, the rest operator is useful for storing properties or array entries that haven’t been destructured or listed as arguments into an object or array respectively.
